import Vue from '../../../@types/vue';
import { EXTENSION_PATH, getGamePacks } from '../../utils';

const FS = require('fs');
const Path = require('path');
const VueClass = require('../../../../libs/vue.common.prod');

const TAG = 'lcc-framework';

// html 文本
export const template = `
<div id="lcc-framework-settings" class="settings">
    <div class="slider">
        <ul>
            <li>
                <ui-label value="i18n:lcc-framework.settings-other"></ui-label>
                <ul>
                    <li v-bind:active="showpage==0" v-on:click="changePage(0)">
                        <ui-label value="i18n:lcc-framework.packs-declaration"></ui-label>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    <div class="content">
        <div v-show="showpage==0">
            <ui-setting type="project" package="lcc-framework" v-for="pack in declaration_packs" v-bind:key="pack">
                <ui-prop>
                    <ui-label slot="label" v-bind:value="pack"></ui-label>
                    <ui-checkbox slot="content" v-bind:path="'declaration.packs.' + pack" checked=""></ui-checkbox>
                </ui-prop>
            </ui-setting>
        </div>
    </div>
</div>
	`;

// 样式文本
export const style = FS.readFileSync(Path.join(EXTENSION_PATH, 'styles', 'base-style.css'), { encoding : 'utf-8' }) + 
	FS.readFileSync(Path.join(EXTENSION_PATH, 'styles', 'settings.css'), { encoding : 'utf-8' });

// 渲染后 html 选择器
export const $ = {
    panel : '#lcc-framework-settings'
};

// 面板上的方法
export const methods = {

};

// 面板上触发的事件
export const listeners = {
	/**
     * 面板隐藏的时候触发
     */
    hide() {
        //console.log(this.hidden);
    },
    /**
     * 面板显示的时候触发
     */
    show() {
        //console.log(this.hidden);
    },
    /**
     * 面板大小更改的时候触发
     */
    resize() {
        //console.log(this.clientHeight);
        //console.log(this.clientWidth);
    },
};

// 当面板渲染成功后触发
export async function ready() {
    let packs =  getGamePacks();
    let decPacks = await Editor.Profile.getProject('lcc-framework', 'declaration.packs');
    for(let pname of packs){
        if(decPacks[pname] == null){
            await Editor.Profile.setProject('lcc-framework', 'declaration.packs.' + pname, true);
        }
    }
    let data = {
        showpage: 0,
        declaration_packs : packs,
    };
    let methods = {
        changePage:(page:number)=>{
            if(data.showpage != page){
                data.showpage = page;
            }
        }
    };
	let vm:Vue = new VueClass({
        el: this.$.panel,
        data: data,
        methods : methods,
    });
};

// 尝试关闭面板的时候触发
export async function beforeClose() {

};

// 当面板实际关闭后触发
export async function close() {

};
